<template>
  <div>
    <van-tabs v-model="activeName" @click="onClick" sticky>
      <template v-for="(nav, index) in navList">
        <van-tab :title="nav.text" :name="nav.status" :key="index">
          <template v-if="orderList.length > 0">
            <div class="order" v-for="(item, index) in orderList" :key="index">
              <van-card num="1" :desc="item.introduction" :title="item.bookName" :thumb="$baseApi + item.coverImage">
                <template #tags>
                  <van-tag plain type="danger">{{ item.author }}</van-tag>
                </template>
                <template #footer>
                  <van-button v-if="nav.status === 0" type="primary" size="mini" @click="onReturn(item)"
                    >归还</van-button
                  >
<!--                  <van-button v-if="[0, 1].includes(nav.status)" type="danger" size="mini">延期</van-button>-->
                </template>
              </van-card>
            </div>
            <van-divider v-if="orderList.length > 9" @click="move(nav.status)">点击加载更多</van-divider>
          </template>
          <template v-else>
            <van-empty description="空空如也!" />
          </template>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<script>
import { getOrderList, returnBook } from '@/api/order.js'

export default {
  data() {
    return {
      userAccount: {},
      imgUrls: this.$baseApi,
      radio: '1',
      status: 0,
      show: false,
      navList: [
        {
          status: 3,
          text: '全部'
        },
        {
          status: 0,
          text: '未归还'
        },
        {
          status: 2,
          text: '已逾期'
        },
        {
          status: 1,
          text: '已归还'
        }
      ],
      activeName: this.$route.query.type * 1,
      limit: 0,
      orderList: [],
      payInfo: {}
    }
  },
  created() {
    this.getList(this.$route.query.type)
  },
  methods: {
    onClick(name, title) {
      this.getList(name)
    },
    getList(name) {
      getOrderList(name).then(res => {
        this.orderList = res.data.lendRecordList
      })
    },
    onReturn(data) {
      returnBook({ id: data.id }).then(res => {
        if (res.code === 200) {
          this.$toast.success('归还成功')
          this.getList(this.$route.query.type)
        }
      })
    }
  }
}
</script>

<style scoped>
.order {
  margin-top: 10px;
  background-color: #ffffff;
}

.order .btn {
  height: 30px;
  border-radius: 7px;
}

.btns {
  width: calc(100% - 30px);
  margin: 10px auto;
}
</style>
